<template>
  <div class="com-full">
    <Card :name="name" :imgType="1">
      <template #body>
        <div class="com-full box com-flex-r">
          <!-- 左 -->
          <div class="lef com-center-c com-flex-c com-center-r">
            <!-- 字 -->
            <span class="lef-word">{{ pueValue }}</span>
            <span class="lef-word-two">小时 PUE</span>
            <!-- 图片 -->
            <img src="/imgs/28.png" style="margin-top: -90px" />
          </div>
          <!-- 右 -->
          <div class="rig">
            <div class="com-flex-r hour">
              <div
                v-for="(item, index) in dataTimes"
                :key="index"
                @click="onclick(item, index)"
                :class="isActive === item.value ? 'bg-img' : ''"
              >
                {{ item.name }}
              </div>
            </div>
            <div class="echart-line">
              <echarts class="com-full" :options="option" />
            </div>
          </div>
        </div>
      </template>
    </Card>
  </div>
</template>
<script setup>
import Card from "@/components/Card/Card.vue";
import { reactive, ref, onMounted, computed, watch, onUnmounted } from "vue";
import echarts from "@/components/Echarts/Echarts.vue";
import { Line_option } from "@/utils/options/LineChart";
import { useParamsStore } from "@/stores/params.js";
import { getOpt } from "../../options/MockData";
import api from "@/api";
import bus from "@/utils/bus.js";

const paramsStore = useParamsStore();
const param = computed(() => paramsStore.param);

const name = "能效统计";
const option = ref({});
const pueValue = ref(0);
const isActive = ref(0);
const dataTimes = reactive([
  { name: "小时", value: 0 },
  { name: "天", value: 1 },
  { name: "月", value: 2 },
]);
let num = 0;
const dataInit = async () => {
  num++;
  const para = {
    ...param.value,
    dataType: isActive.value,
  };
  if (isMockData) {
    const mockdata = await getOpt(param.value.ueId);
    if (num === 1) {
      pueValue.value = getRandon(mockdata["v21"].min, mockdata["v21"].max);
    }
    const obj = {
      0: [
        [
          param.value.ueId === "defaultData" ? "仓储" : "1#微魔方",
          getRandon(mockdata["v21"].min, mockdata["v21"].max),
        ],
        [
          param.value.ueId === "defaultData" ? "A1" : "2#微魔方",
          getRandon(mockdata["v22"].min, mockdata["v22"].max),
        ],
        [
          param.value.ueId === "defaultData" ? "B1" : "3#微魔方",
          getRandon(mockdata["v23"].min, mockdata["v23"].max),
        ],
        [
          param.value.ueId === "defaultData" ? "B2" : "4#微魔方",
          getRandon(mockdata["v24"].min, mockdata["v24"].max),
        ],
      ],
      1: [
        [
          param.value.ueId === "defaultData" ? "仓储" : "1#微魔方",
          getRandon(mockdata["v25"].min, mockdata["v25"].max),
        ],
        [
          param.value.ueId === "defaultData" ? "A1" : "2#微魔方",
          getRandon(mockdata["v26"].min, mockdata["v26"].max),
        ],
        [
          param.value.ueId === "defaultData" ? "B1" : "3#微魔方",
          getRandon(mockdata["v27"].min, mockdata["v27"].max),
        ],
        [
          param.value.ueId === "defaultData" ? "B2" : "4#微魔方",
          getRandon(mockdata["v28"].min, mockdata["v28"].max),
        ],
      ],
      2: [
        [
          param.value.ueId === "defaultData" ? "仓储" : "1#微魔方",
          getRandon(mockdata["v29"].min, mockdata["v29"].max),
        ],
        [
          param.value.ueId === "defaultData" ? "A1" : "2#微魔方",
          getRandon(mockdata["v30"].min, mockdata["v30"].max),
        ],
        [
          param.value.ueId === "defaultData" ? "B1" : "3#微魔方",
          getRandon(mockdata["v31"].min, mockdata["v31"].max),
        ],
        [
          param.value.ueId === "defaultData" ? "B2" : "4#微魔方",
          getRandon(mockdata["v32"].min, mockdata["v32"].max),
        ],
      ],
    };
    option.value = Line_option(obj[isActive.value]);
  } else {
    const { data } = await api.pue(para);
    pueValue.value = data.data ?? 0;
    const optionsData = data.pueStatistics
      ? data.pueStatistics.map((item) => [item.addressName ?? "默认", item.data ?? 0])
      : [];
    option.value = Line_option(optionsData);
  }
};
const onclick = (item) => {
  isActive.value = item.value;
  dataInit();
};
//取随机数
const getRandon = (min, max) => {
  if (min === max) {
    return max;
  }
  if (min === 0 && max === 0) {
    return 0;
  }
  min = Math.ceil(min);
  max = Math.floor(max);
  const num = Math.floor(Math.random() * (max - min + 1)) + min;
  const randomDecimal = Math.random().toFixed(2).substring(1); // 生成0.xx格式的字符串，然后去掉前面的0
  return parseFloat(`${num}${randomDecimal}`);
};
let isMockData = true;
onMounted(() => {
  bus.on("useMock", (e) => {
    isMockData = e;
    dataInit();
  });
});
onUnmounted(() => {
  bus.off("useMock", (e) => {
    isMockData = e;
    dataInit();
  });
});

watch(
  () => param.value,
  () => {
    dataInit();
  },
  { deep: true }
);
</script>

<style lang="scss" scoped>
.box {
  margin: 10px;
}

.lef {
  width: 35%;

  .lef-word {
    font-size: 80px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 4.8px;
    margin-top: 10px;
  }

  .lef-word-two {
    font-size: 26px;
    color: #99b1dd;
    letter-spacing: 1.6px;
  }
}

.rig {
  width: 65%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.echart-line {
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

.hour {
  width: fit-content;
  color: #c4d7ee;
  pointer-events: all;
  cursor: pointer;
  margin-right: 20px;
  background-image: url("/imgs/27.png");
  background-size: 100% 100%;
  padding: 5px 25px;

  div {
    font-size: 28px;
    color: #c4d7ee;
    padding: 0 35px;
  }

  .bg-img {
    background-image: url("/imgs/47.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}
</style>
